<template>
  <div class="app-container">
    <header class="header">
      <div class="logo">
        <router-link to="/">民宿预约系统</router-link>
      </div>
      <nav class="nav">
        <router-link to="/">首页</router-link>
        <router-link to="/news">民宿资讯</router-link>
        <router-link v-if="!isLoggedIn" to="/login">登录</router-link>
        <router-link v-if="!isLoggedIn" to="/register">注册</router-link>
        <template v-if="isLoggedIn">
          <router-link to="/user/bookings">我的预订</router-link>
          <router-link to="/user/favorites">我的收藏</router-link>
          <router-link to="/user/profile">个人中心</router-link>
          <a href="#" @click.prevent="handleLogout">退出</a>
        </template>
      </nav>
    </header>
    
    <main class="main-content">
      <router-view></router-view>
    </main>
    
    <footer class="footer">
      <p>&copy; 民宿预约系统 - 您的舒适之家</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, onBeforeMount, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { eventBus, authState, updateAuthState } from './utils/eventBus'

// 路由
const router = useRouter()
const route = useRoute()

// 登录状态，从共享的authState获取
const isLoggedIn = ref(authState.value.isLoggedIn)

// 检查登录状态
const checkLoginStatus = () => {
  updateAuthState()
  isLoggedIn.value = authState.value.isLoggedIn
  console.log('当前登录状态:', isLoggedIn.value ? '已登录' : '未登录')
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  checkLoginStatus() // 更新登录状态
  router.push('/')
}

// 监听登录状态变化事件
const handleAuthChange = (state) => {
  isLoggedIn.value = state.isLoggedIn
  console.log('登录状态改变:', isLoggedIn.value ? '已登录' : '未登录')
}

// 监听路由变化时检查登录状态
watch(() => route.path, () => {
  checkLoginStatus()
})

// 组件挂载前检查登录状态
onBeforeMount(() => {
  checkLoginStatus()
  // 订阅登录状态变化事件
  eventBus.on('auth-changed', handleAuthChange)
})

// 组件挂载时检查登录状态
onMounted(async () => {
  await nextTick()
  checkLoginStatus()
  
  // 每次从localStorage中检测到token变化时更新登录状态
  window.addEventListener('storage', (e) => {
    if (e.key === 'token' || e.key === 'user') {
      checkLoginStatus()
    }
  })
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  eventBus.off('auth-changed', handleAuthChange)
  window.removeEventListener('storage', checkLoginStatus)
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #f5f5f5;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  position: relative;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.logo a {
  color: #ff6b6b;
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

.nav a {
  color: #555;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.nav a:hover,
.nav a.router-link-active {
  color: #ff6b6b;
}

.main-content {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: auto;
  position: relative;
  z-index: 5;
}
</style>
